<template>
    <div>
    <div class="block">
    <!-- <span class="demonstration" style="margin-left:8%">请选择年份</span>
    <el-date-picker
    ref="yearpick"
      :default-value="defaultyear"
      v-model="defaultyear"
      type="year"
      @change="refresh"
      value-format="yyyy"
      placeholder="选择年">
    </el-date-picker> -->
     <span class="demonstration" style="margin-left:8%">请选择日期</span>
    <el-date-picker
      ref="yearpick"
      type="month"
      v-model="defaultyear"
      @change="refresh"
      value-format=“yyyy-MM-dd”
      placeholder="选择月">
    </el-date-picker>

  <el-row :gutter="20" >
  <el-col :span="8"><div class="grid-content bg-purple" style="margin-left:20%;margin-top:5%;">
  <div style="margin: 14px;">
  <span style="margin:14px;font-size:25px;color:blue;">{{prdacount+'辆'}}</span>
  <div class="bottom clearfix" style="margin-top:15px">
          <span style="margin:14px">{{'本年销量'}}</span>
          <span >{{ '环比 '+prdcounthb+'%' }}</span>
          <i :class='[prdcounthb>0?"el-icon-top" : "el-icon-bottom"]' :style="{'color' : prdcounthb>0 ? 'green' : 'red'}"></i>
        </div>
         <div class="bottom clearfix">
          <span style="margin-left:98px">{{ '同比 '+prdcounttb +'%'}}</span>
          <i :class='[prdcounttb>0?"el-icon-top" : "el-icon-bottom"]' :style="{'color' : prdcounttb>0 ? 'green' : 'red'}"></i>
        </div>
       </div>
 </div></el-col>
  <el-col :span="8"><div class="grid-content bg-purple" style="margin-left:20%;margin-top:5%;">
 <div style="margin: 14px;">
  <span style="margin:14px;font-size:25px;color:blue;">{{yieldaccount+'辆'}}</span>
  <div class="bottom clearfix" style="margin-top:15px">
          <span style="margin:14px">{{'本年产量'}}</span>
          <span >{{ '环比 '+yieldhb +'%'}}</span>
          <i :class='[yieldhb>0?"el-icon-top" : "el-icon-bottom"]' :style="{'color' : yieldhb>0 ? 'green' : 'red'}"></i>
        </div>
         <div class="bottom clearfix">
          <span style="margin-left:98px">{{ '同比 '+yieldtb +'%'}}</span>
          <i :class='[yieldtb>0?"el-icon-top" : "el-icon-bottom"]' :style="{'color' : yieldtb>0 ? 'green' : 'red'}"></i>
        </div>
       </div>  </div></el-col>
  <el-col :span="8"><div class="grid-content bg-purple" style="margin-left:20%;margin-top:5%;">
 <div style="margin: 14px;">
  <span  style="margin:14px;font-size:25px;color:blue;">{{stockaccount+'辆'}}</span>
  <div class="bottom clearfix" style="margin-top:15px">
          <span style="margin:14px">{{'本年存量'}}</span>
          <span >{{ '环比 '+stockhb +'%'}}</span>
          <i :class='[stockhb>0?"el-icon-top" : "el-icon-bottom"]'  :style="{'color' : stockhb>0 ? 'green' : 'red'}"></i>
        </div>
         <div class="bottom clearfix">
          <span style="margin-left:98px">{{ '同比 '+stocktb +'%'}}</span>
          <i :class='[stocktb>0?"el-icon-top" : "el-icon-bottom"]'  :style="{'color' : stocktb>0 ? 'green' : 'red'}"></i>
        </div>
       </div>
      </div></el-col>
</el-row>
</div>

    <div id="myChart"  style="width:100%;height:500px;margin-top:1%"></div>
             <el-table
            :data="students"
            border
            style="width: 100%">
            <el-table-column
              prop="name"
              width="150"
              align="center"
              label="模块/日期"
              fixed
            >
            </el-table-column>
            <template v-for='(col,i) in datalist'>
              <el-table-column
                :show-overflow-tooltip="true"
                :label="col"
                :key="col"
                width="100"
                align="center"
              >
                <template slot-scope="scope">
                  <span>
                      {{scope.row.list[i].number}}
                </span>
                </template>
              </el-table-column>
            </template>
          </el-table>
    </div>
</template>
<script type="text/ecmascript-6">
export default {
  name: 'hello',
  data () {
    return {
    // 产量环比
      yieldhb: 30,
      // 产量同比
      yieldtb: 20,
      // 存量环比
      stockhb: 23,
      // 存量同比
      stocktb: 32,
      // 销量环比
      prdcounthb: 25,
      // 销量同比
      prdcounttb: -25,
      // 销量
      prdacount: '32524',
      // 产量
      yieldaccount: '23456',
      // 存量
      stockaccount: '33466',
      // 默认年份
      defaultyear: '',
      // 销量、产量、存量数据信息
      students: [],
      // 下方表格的横坐标值，日期值
      datalist: [],
      // echarts的属性设置
      option: {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['销量', '产量', '存量']
        },
        xAxis: {
          data: [],
          name: '时间/月份'
        },
        yAxis: {
          name: '数量/辆'
        },
        series: [{
          name: '销量',
          // data: [4,5,4,5,6,7,8,9,10,3,4,7],
          data: [],
          type: 'bar',
          stack: '数量',
          itemStyle: {
            normal: {
              label: {
                show: true, // 开启显示
                position: 'inside', // 在上方显示
                textStyle: { // 数值样式
                  color: 'white',
                  fontSize: 16
                }
              }
            }
          }
        }, {
          name: '产量',
          stack: '数量',
          itemStyle: {
            normal: {
              label: {
                show: true, // 开启显示
                position: 'inside', // 在上方显示
                textStyle: { // 数值样式
                  color: 'white',
                  fontSize: 16
                }
              }
            }
          },
          //  data: [3,5,3,4,6,8,7,5,10,9,4,5],
          data: [],
          type: 'bar'// scatter 代表散点图，bar代表柱状图，line代表线性tu
        }, {
          name: '存量',
          stack: '数量',
          //  data: [3,5,6,4,6,8,7,5,10,9,4,5],
          data: [],
          itemStyle: {
            normal: {
              label: {
                show: true, // 开启显示
                position: 'inside', // 在上方显示
                textStyle: { // 数值样式
                  color: 'white',
                  fontSize: 16
                }
              }
            }
          },
          type: 'bar'
        }]
      }
    }
  },
  mounted () {
    // mounted--钩子函数，一来到该页面即执行，这里面让其执行init()函数。
    this.drawLine()
    this.init()
  },
  methods: {
    drawLine () {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart'))
      // 绘制图表
      this.$axios({
        method: 'get',
        url: 'http://127.0.0.1:8080/getPrdCountForecharts',
        params: {
          'year': this.$refs.yearpick.value
        }
      }).then((response) => { // 这里使用了ES6的语法
        // myChart.hideLoading();
        var Data2 = response.data
        console.log(Data2) // 请求成功返回的数据
        this.option.xAxis.data = Data2[0]
        this.option.series[0].data = Data2[1]
        this.option.series[1].data = Data2[2]
        this.option.series[2].data = Data2[3]
        myChart.setOption(this.option)
        console.log(Data2)
      }).catch((error) => {
        console.log(error) // 请求失败返回的数据
      })
      myChart.setOption(this.option)
    },
    // 初始化，请求后台产品销售等数据
    init () {
      this.$axios({
        method: 'get',
        url: 'http://127.0.0.1:8080/getPrdCount',
        params: {
          'year': this.$refs.yearpick.value
        }
      }).then((response) => { // 这里使用了ES6的语法
        var Data = response.data
        console.log(response.data) // 请求成功返回的数据
        this.students = Data
        this.datalist = Data[2].datelist
      }).catch((error) => {
        console.log(error) // 请求失败返回的数据
      })
      this.$axios({
        method: 'get',
        url: 'http://127.0.0.1:8080/getPrdCountPercent',
        params: {
          'year': this.$refs.yearpick.value
        }
      }).then((response) => { // 这里使用了ES6的语法
        var Data3 = response.data
        console.log(response.data) // 请求成功返回的数据
        this.prdacount = Data3[0].prdcount
        this.prdcounthb = Data3[0].prdcounthb
        this.prdcounttb = Data3[0].prdcounttb

        this.yieldaccount = Data3[0].yield
        this.yieldhb = Data3[0].yieldhb
        this.yieldtb = Data3[0].yieldtb

        this.stockaccount = Data3[0].stock
        this.stockhb = Data3[0].stockhb
        this.stocktb = Data3[0].stocktb
      }).catch((error) => {
        console.log(error) // 请求失败返回的数据
      })
    },
    refresh () {
      this.drawLine()
      this.init()
    }
  }
}
</script>
